<template>
    <div class="div_main_frame" style="text-align:center;margin:0 auto" align="center">
    <div class="fastweb_div_middle" style="width:1500px;height:auto;">
          <div class="headerSearch">
            <input id="search_id" placeholder="输入股票代码或名称，如:[600][银行]" type="search" v-model.trim="keyword" v-on:focus="focus()" autocomplete=“off”>
            <button v-bind:disabled="dis">输入并选择</button>
            <div class="search_menu">
              <ul class="input_suggest">
            <li v-for="input_val in input_list" :key="input_val" @click.left="select_li(input_val)">
              <!--button @click="select1(input_val)">{{input_val}}</button-->
              {{input_val}}
              <!--span v-on:click.up="select1(input_val)">{{input_val}}</span-->
              <!--a :href="'/search?wd=' + input_val">{{ input_val }}</a-->
            </li>
            </ul>
            </div>
        </div>
    </div>
    <div class="fastweb_div_middle" style="width:1500px;height:auto;">
          <ViewAttrData :json_data="json_data_chanpin" :relation="2002"/>
          <ViewAttrData :json_data="json_data_zhishu"  :relation="2001"/>
          <ViewAttrDataShidagudong :json_data="json_data_gudong"  :relation="1003"/>
          <ViewAttrData :json_data="json_data"  :relation="1001"/>
    </div>

    <div class="fastweb_div_middle" style="width:1500px;height:auto;">
          <!--ViewTabs /-->
          <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
            
            <el-tab-pane label="监管" name="tab1" :key="'tab1'">
                <ViewAttrV3 v-if="isChildUpdate1" :json_data="tabs_json_data" />    
            </el-tab-pane>

            <el-tab-pane label="诉讼" name="tab2" :key="'tab2'">
                <ViewAttrV3 v-if="isChildUpdate2" :json_data="tabs_json_data" />   
            </el-tab-pane>

            <el-tab-pane label="调价" name="tab3" :key="'tab3'">
                <ViewAttrV3 v-if="isChildUpdate3" :json_data="tabs_json_data" /> 
            </el-tab-pane>

            <el-tab-pane label="调研" name="tab4" :key="'tab4'">
                <ViewAttrV3 v-if="isChildUpdate4" :json_data="tabs_json_data" /> 
            </el-tab-pane>

            <el-tab-pane label="产业链" name="tab5" :key="'tab5'">
                <ViewAttrV3 v-if="isChildUpdate5" :json_data="tabs_json_data" /> 
            </el-tab-pane>

            <el-tab-pane label="管理" name="tab6" :key="'tab6'">
                <ViewAttrV3 v-if="isChildUpdate6" :json_data="tabs_json_data" /> 
            </el-tab-pane>

            <el-tab-pane label="业绩" name="tab7" :key="'tab7'">
                <ViewAttrV3 v-if="isChildUpdate7" :json_data="tabs_json_data" /> 
            </el-tab-pane>

            <el-tab-pane label="其它" name="tab99" :key="'tab99'">
                <ViewAttrV3 v-if="isChildUpdate99" :json_data="tabs_json_data" /> 
            </el-tab-pane>

        </el-tabs>
    </div>

    </div>

    
    
    <ViewFooter/>
</template>

<script>
import ViewFooter from '@/components/ViewFooter.vue'
import ViewTabs from '@/components/ViewTabs.vue'
import ViewAttrV3 from '@/components/ViewAttrV3'
import ViewAttrData from '@/components/ViewAttrData.vue'
import ViewAttrDataShidagudong from '@/components/ViewAttrDataShidagudong.vue'
import { getCurrentInstance } from 'vue'
import "@/assets/global.css"
import "@/assets/fastweb.css"

export default 
{
    name: 'PageSearch',
    components: {
        ViewFooter,
        //ViewTabs,
        ViewAttrV3,
        ViewAttrData,
        ViewAttrDataShidagudong
    },
    data () {
      return {
        param:{},
        title: '',
        entity: '',
        datas: '',
        json_data: {
            name: '',
            nodes: [],
        },
        json_data_zhishu: {
            name: '',
            nodes: [],
        },
        json_data_chanpin: {
            name: '',
            nodes: [],
        },
        json_data_gudong: {
            name: '',
            nodes: [],
        },
        json_data_all: {
            name: '',
            nodes: [],
        },
        message: '',
        keyword: '',
        input_list:[],

        //默认第一个选项卡
        activeName: "tab1",
        isChildUpdate1:true,
        isChildUpdate2:false,
        isChildUpdate3:false,
        isChildUpdate4:false,
        isChildUpdate5:false,
        isChildUpdate6:false,
        isChildUpdate7:false,
        isChildUpdate99:false,
        tabs_json_data: {},
      };
    },
    setup(){
      const host = getCurrentInstance()?.appContext.config.globalProperties.host
      return {host};
        
    },
    beforeRouteEnter(to, from, next){
      console.log("beforeRouteEnter");
      //this.getDatas("123");
      next(vm => {
        console.log("beforeRouteEnter000");
        vm.title = to.meta.title;
        let url = vm.setRequestUrl(to.fullPath);
        vm.getDatas(url, vm.pageNum, vm.pageSize);
      });
    },
    beforeRouteUpdate(to){
      console.log("beforeRouteUpdate123:" + to.fullPath);
      let url = this.setRequestUrl(to.fullPath);
      // this.getDatas(url);
      /*
      next(vm => {
        console.log("beforeRouteEnter000");
        vm.title = to.meta.title;
        let url = vm.setRequestUrl(to.fullPath);
        vm.getDatas(url, vm.pageNum, vm.pageSize);
      });*/
      //this.getDatas(url, this.pageNum, this.pageSize);
      //return true;
    },
    mounted(){
        var url = window.location.href;             //获取当前url
        var cs_list = url.split('?');                //获取?之后的参数字符串
        this.param = {"type":"股票","code":"600000"};
        if (cs_list[1]){
          var cs_arr = cs_list[1].split('&');                    //参数字符串分割为数组
          for(var i=0;i<cs_arr.length;i++){         //遍历数组，拿到json对象
            this.param[cs_arr[i].split('=')[0]] = cs_arr[i].split('=')[1];
          }
        }
        this.getDatas("")
        //var type = this.$route.query.type
        //var code = this.$route.query.code
        /*
        var api_url = this.host.concat("/api/display_chufa?type=").concat(this.param["type"]).concat("&code=").concat(this.param["code"]);
        this.isChildUpdate1 = true;
        this.isChildUpdate2 = false;
        this.isChildUpdate3 = false;
        this.isChildUpdate4 = false;
        this.isChildUpdate5 = false;
        this.isChildUpdate6 = false;
        this.isChildUpdate7 = false;
        this.isChildUpdate99 = false;
        this.axios.get(api_url)
        .then(response => {
            if((response.status == 200) && (response.data.result == 0)){
                this.tabs_json_data = JSON.parse(response.data.data);
            }
        })
        .catch(error => alert(error));*/
    },
    methods: {
      getDatas(url){
        var type = this.param["type"]
        var code = this.param["code"]
        var name = this.param["name"]
        console.log("getDatas:" + url);
        
        var api_url = this.host.concat("/api/display_code_data?type=").concat(type).concat("&code=").concat(code).concat("&name=").concat(name).concat("&relation=1001");
          this.axios.get(api_url)
          .then(response => {
            if((response.status == 200) && (response.data.result == 0)){
              this.datas = response.data.data;
              this.json_data_all = JSON.parse(response.data.data);
              var tag1001 = 0;
              var tag1003 = 0;
              var tag2002 = 0;
              var tag2001 = 0;
              for(var i=0;i < this.json_data_all.nodes.length; i++){
                if (this.json_data_all.nodes[i].id == "1001"){
                  this.json_data = JSON.parse(this.json_data_all.nodes[i].data);
                  tag1001 = 1;
                } else if (this.json_data_all.nodes[i].id == "1003"){
                  this.json_data_gudong = JSON.parse(this.json_data_all.nodes[i].data);
                  tag1003 = 1;
                } else if (this.json_data_all.nodes[i].id == "2002"){
                  this.json_data_chanpin = JSON.parse(this.json_data_all.nodes[i].data);
                  tag2002 = 1;
                } else if (this.json_data_all.nodes[i].id == "2001"){
                  this.json_data_zhishu = JSON.parse(this.json_data_all.nodes[i].data);
                  tag2001 = 1;
                }
              }

              if (0 == tag1001) {
                this.json_data = {};
              }
              if (0 == tag1003) {
                this.json_data_gudong = {};
              }
              if (0 == tag2002) {
                this.json_data_chanpin = {};
              }
              if (0 == tag2001) {
                this.json_data_zhishu = {};
              }


              //this.json_data_chicang = json_data_all.
              this.entity = this.json_data.name;
              this.title = this.json_data.name;
            }
          })
          .catch(error => alert(error));
        this.message = '';
        this.handleUpdate();
      },
      //动态设置服务端数据接口的请求URL
      //设置后回导致重复调用上次的请求
      
      setRequestUrl(path){
        let url = path;
        console.log("path:", path);
        return url;
      },

      search(){
        // 当查询关键字与当前路由对象中的查询参数wd值不同时，才调用$router.push方法
        if(this.keyword != this.$route.query.wd)
            this.$router.push({path: '/search', query: {wd: this.keyword}})
      },

      blur:function() {
        console.log("blur:");
        this.input_list=[];
      },
      focus:function(){
        if(document.querySelector('#search_id')==document.activeElement){
          console.log("focus:");
          this.fuzzy_search(this.keyword.trim());
        }
      },
      fuzzy_search:function(value){
          //this.input_list=["a", "b", "c"];
          //return;
          
          console.log("fuzzy_search:" + value);
          var that =this;
          that.input_list=[];
          if(!value){
              that.input_list=[];
              return;
          }

          var url = this.host.concat("/api/display_suggest?word=").concat(value);
          this.axios.get(url)
          .then(response => {
            if(response.status == 200){
            //if(response.data.code == 200){
              this.input_list = response.data.data;
            }
          })
          .catch(error => alert(error));

          //调取接口
          that.input_list=[];
      },

      select_li:function(input_val) {
        console.log("select:" + input_val);
        var lists = input_val.split("|")
        console.log("select1:" + lists[0] + lists[1] + lists[2]);

        this.param["type"] = lists[0];
        this.param["code"] = lists[1];
        this.param["name"] = lists[2];
        this.getDatas("");
        //var router_path = "/search.html?word=" + this.form.entity_name + "&page=" + val;
        //window.open(router_path, '_blank')

        /*
        if((lists[0] == "股票") || (lists[0] == "基金")) {
          if(/^\d+$/.test(this.keyword)) {
            this.keyword = lists[1];
          } else {
            this.keyword = lists[2];
          }
        } else {
          this.keyword = lists[2];
        }*/
        //this.keyword = input_val;
        /*
        this.$router.push({
          path:'/search',
          name:'search',
          query: {
            type: lists[0],
            code: lists[1],
            name: lists[2],
          }});*/
        this.input_list=[];
      },
      handleClick(tab, event) {
            var type = this.param["type"]
            var code = this.param["code"]
            var api_url = ''
            if(tab.props.name == "tab1") {
                api_url = this.host.concat("/api/display_chufa?type=").concat(type).concat("&code=").concat(code);
                this.isChildUpdate1 = true;
                this.isChildUpdate2 = false;
                this.isChildUpdate3 = false;
                this.isChildUpdate4 = false;
                this.isChildUpdate5 = false;
                this.isChildUpdate6 = false;
                this.isChildUpdate7 = false;
                this.isChildUpdate99 = false;
            } else if(tab.props.name == "tab2") {
                api_url = this.host.concat("/api/display_susong?type=").concat(type).concat("&code=").concat(code);
                this.isChildUpdate1 = false;
                this.isChildUpdate2 = true;
                this.isChildUpdate3 = false;
                this.isChildUpdate4 = false;
                this.isChildUpdate5 = false;
                this.isChildUpdate6 = false;
                this.isChildUpdate7 = false;
                this.isChildUpdate99 = false;
            } else if(tab.props.name == "tab3") {
                api_url = this.host.concat("/api/display_tiaojia?type=").concat(type).concat("&code=").concat(code);
                this.isChildUpdate1 = false;
                this.isChildUpdate2 = false;
                this.isChildUpdate3 = true;
                this.isChildUpdate4 = false;
                this.isChildUpdate5 = false;
                this.isChildUpdate6 = false;
                this.isChildUpdate7 = false;
                this.isChildUpdate99 = false;
            } else if(tab.props.name == "tab4") {
                api_url = this.host.concat("/api/display_diaoyan?type=").concat(type).concat("&code=").concat(code);
                this.isChildUpdate1 = false;
                this.isChildUpdate2 = false;
                this.isChildUpdate3 = false;
                this.isChildUpdate4 = true;
                this.isChildUpdate5 = false;
                this.isChildUpdate6 = false;
                this.isChildUpdate7 = false;
                this.isChildUpdate99 = false;
            } else if(tab.props.name == "tab5") {
                api_url = this.host.concat("/api/display_chanyelian?type=").concat(type).concat("&code=").concat(code);
                this.isChildUpdate1 = false;
                this.isChildUpdate2 = false;
                this.isChildUpdate3 = false;
                this.isChildUpdate4 = false;
                this.isChildUpdate5 = true;
                this.isChildUpdate6 = false;
                this.isChildUpdate7 = false;
                this.isChildUpdate99 = false;
            } else if(tab.props.name == "tab6") {
                api_url = this.host.concat("/api/display_guanli?type=").concat(type).concat("&code=").concat(code);
                this.isChildUpdate1 = false;
                this.isChildUpdate2 = false;
                this.isChildUpdate3 = false;
                this.isChildUpdate4 = false;
                this.isChildUpdate5 = false;
                this.isChildUpdate6 = true;
                this.isChildUpdate7 = false;
                this.isChildUpdate99 = false;
            } else if(tab.props.name == "tab7") {
                api_url = this.host.concat("/api/display_yeji?type=").concat(type).concat("&code=").concat(code);
                this.isChildUpdate1 = false;
                this.isChildUpdate2 = false;
                this.isChildUpdate3 = false;
                this.isChildUpdate4 = false;
                this.isChildUpdate5 = false;
                this.isChildUpdate6 = false;
                this.isChildUpdate7 = true;
                this.isChildUpdate99 = false;
            } else if(tab.props.name == "tab99") {
                api_url = this.host.concat("/api/display_other?type=").concat(type).concat("&code=").concat(code);
                this.isChildUpdate1 = false;
                this.isChildUpdate2 = false;
                this.isChildUpdate3 = false;
                this.isChildUpdate4 = false;
                this.isChildUpdate5 = false;
                this.isChildUpdate6 = false;
                this.isChildUpdate7 = false;
                this.isChildUpdate99 = true;
            }
            this.axios.get(api_url)
            .then(response => {
                if((response.status == 200) && (response.data.result == 0)){
                    this.tabs_json_data = JSON.parse(response.data.data.replace(/&amp;/g, "&"));
                }
            })
            .catch(error => alert(error));
        },
        handleUpdate() {
            var type = this.param["type"]
            var code = this.param["code"]
            var api_url = this.host.concat("/api/display_chufa?type=").concat(type).concat("&code=").concat(code);
            this.isChildUpdate1 = true;
            this.isChildUpdate2 = false;
            this.isChildUpdate3 = false;
            this.isChildUpdate4 = false;
            this.isChildUpdate5 = false;
            this.isChildUpdate6 = false;
            this.isChildUpdate7 = false;
            this.isChildUpdate99 = false;
            this.axios.get(api_url)
            .then(response => {
                if((response.status == 200) && (response.data.result == 0)){
                    this.tabs_json_data = JSON.parse(response.data.data.replace(/&amp;/g, "&"));
                }
            })
            .catch(error => alert(error));
        }
    },
    watch: {
      // 如果路由发生变化，再次执行该方法
      //"$route": "getDatas",
      keyword:function(){
          console.log("watch:");
          this.focus();
      },
    }
}

var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?c2ba86525ff37a3b2dd6cdadb129fdb5";
var s = document.getElementsByTagName("script")[0]; 
s.parentNode.insertBefore(hm, s);
</script>

<style>
.bottom_line {
    padding: 2px;
    background-color: #409EFF;
}
</style>

<style scoped>

.div_entity_data {
    display:table;
}

.div_entity_main {
    height:100%;
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
}



.left_bracket_container {
  width:100%;
  height:100%;
  padding-top:20px;
  padding-bottom:20px;
  height:100%;
  position:absolute;
  left:43%;
  top:0;
  bottom:0;
}

.right_bracket_container {
  width:100%;
  height:100%;
  padding-top:20px;
  padding-bottom:20px;
  height:100%;
  position:absolute;
  top:0;
  right:43%;
  bottom:0;
}

.bracket_container {
  height:100%;
  width:100%;
  margin:0px;
  padding:0px;
}

.left_bracket_line_container {
  width:16px;
  height:100%;
  position:relative;
  float:left;
}

.right_bracket_line_container {
  width:16px;
  height:100%;
  position:relative;
  float:right;
}

.bracket_line {
  width:12px;
  border-top:1px solid black;
  height:0px;
  text-align:center;
  margin: auto;
  position:absolute;
  left: 0;
  top: 0;
  bottom:0;
  right: 0;
}
.bracket_left_edge {
  width:10px;
  height:100%;
  line-height:100%;
  text-align:center;
  border-left:1px solid black;
  border-top:1px solid black;
  border-bottom:1px solid black;
  float:right;
}
.bracket_right_edge {
  width:10px;
  height:100%;
  line-height:100%;
  text-align:center;
  border-right:1px solid black;
  border-top:1px solid black;
  border-bottom:1px solid black;
  float:left;
}


.headerSearch {
    display: inline-block; 
    position: relative;
}
.headerSearch input {
    width: 400px;
    height: 40px;
    font-size:20px;
}

.headerSearch button{
    position: absolute;
    right: 2px;
    top: 2px;
    width: 100px;
    height: 36px;
    margin: 0;
    border: none;
    color: orange;
    cursor: pointer;
}

.search_menu {
  background-color: gold;
  top:40px;
  width:100%;
  height:auto;
  border:1ps solid blue;
  position: absolute;
  text-align: left;
  z-index: 10;
}

.search_menu ul{
  margin-bottom: 0;
  list-style-type: none;
}

.search_menu li {
  padding: 5px;
  font-size: 1.1em;
  cursor: pointer;
}

.search_menu li:hover {
  background-color: beige;
}

.search:hover .search_menu {
  display: block;
}


input::-webkit-input-placeholder{
    color:#DDDDDD;
    font-size:16px;
}
input::-moz-placeholder{   /* Mozilla Firefox 19+ */
    color:#DDDDDD;
    font-size:16px
}
input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
    color:#DDDDDD;
    font-size:16px
}
input:-ms-input-placeholder{  /* Internet Explorer 10-11 */
    color:#DDDDDD;
    font-size:16px
}
</style>
